<template>
  <a-row :gutter="4">
    <a-col :md="8">
      <a-card title="工艺路线">
        <vxe-toolbar>
          <template #buttons>
            <a-space>
              <a-button type="primary">添加</a-button>
              <a-button type="danger">批量删除</a-button>
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable1" border stripe height="560"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="编码" title="编码" sortable width="100">
            <template #default="{ rowIndex }">R-0000{{ rowIndex + 1 }}</template>
          </vxe-column>
          <vxe-column field="名称" title="名称" sortable show-overflow width="100"></vxe-column>
          <vxe-column field="版本" title="版本" sortable show-overflow width="150"></vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="200">
            <template #default>
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="2">
                    最新版本
                  </a-menu-item>
                  <a-menu-item key="2">
                    V1
                  </a-menu-item>
                  <a-menu-item key="2">
                    V2
                  </a-menu-item>
                </a-menu>
                <a-button type="link">版本</a-button>
              </a-dropdown>
              <a-button type="link">复制</a-button>
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="2">
                    发版
                  </a-menu-item>
                  <a-menu-item key="2">
                    编辑
                  </a-menu-item>
                  <a-menu-item key="2">
                    删除
                  </a-menu-item>
                </a-menu>
                <a-button type="link">更多</a-button>
              </a-dropdown>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-card>
    </a-col>
    <a-col :md="16">
      <a-card>
        <a-tabs>
          <a-tab-pane key="工序列表" tab="工序列表">
            <vxe-toolbar>
              <template #buttons>
                <a-space>
                  <a-button type="primary">添加</a-button>
                  <a-button>导入</a-button>
                  <a-button type="danger">批量删除</a-button>
                </a-space>
              </template>
            </vxe-toolbar>
            <vxe-table ref="xTable1" border stripe height="200"
              :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
              :row-config="{ isHover: true }" :data="tableData"
              :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
              <vxe-column type="checkbox" width="40"></vxe-column>
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="工序" title="工序" sortable show-overflow width="100">
                <template #default="{ row }"><a href="#">{{ row.工序 ? row.工序 : "测试工序" }}</a></template>
              </vxe-column>
              <vxe-column field="工作中心" title="工作中心" sortable show-overflow width="100">
                <template #default="{ row }"><a href="#">{{ row.工作中心 ? row.工作中心 : "测试工作中心" }}</a></template>
              </vxe-column>
              <vxe-column field="是否定拍工序" title="是否定拍工序" sortable show-overflow width="150" align="center">
                <template #default="{ row }"><a-tag color="green">{{ row.工作中心 ? row.工作中心 : "否" }}</a-tag></template>
              </vxe-column>
              <vxe-column field="生产节拍（秒/件）" title="生产节拍（秒/件）" sortable show-overflow width="180"></vxe-column>
              <vxe-column field="SOP文件" title="SOP文件" sortable show-overflow width="150">
                <template #default="{ row }"><a href="#">{{ row.SOP文件 }}</a></template>
              </vxe-column>
              <vxe-column field="产出物料" title="产出物料" sortable show-overflow width="150">
                <template #default="{ row }"><a href="#">{{ row.产出物料 }}</a></template>
              </vxe-column>
              <vxe-column field="报工方式" title="报工方式" sortable show-overflow width="150">
                <template #default="{ row }"><a-tag color="green">{{ row.报工方式 ? row.报工方式 : "装箱报工" }}</a-tag></template>
              </vxe-column>
              <vxe-column field="工艺标准" title="工艺标准" sortable show-overflow width="150">
                <template #default="{ row }"><a href="#">{{ row.工艺标准 }}</a></template>
              </vxe-column>
              <vxe-column field="操作" title="操作" fixed="right" width="150">
                <template #default>
                  <a-button type="link">编辑</a-button>
                  <a-button type="link" danger>删除</a-button>
                </template>
              </vxe-column>
            </vxe-table>
            <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
              icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
              icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="handlePageChange">
            </vxe-pager>
            <a-tabs>
              <a-tab-pane key="人" tab="关键人员">
                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="工号" title="工号" sortable>
                    <template #default="{ rowIndex }"><a href="#">U_0000{{ rowIndex + 1 }}</a></template>
                  </vxe-column>
                  <vxe-column field="姓名" title="姓名" sortable show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.姓名 ? row.姓名 : "测试" }}</a></template>
                  </vxe-column>
                  <vxe-column field="岗位" title="岗位" sortable show-overflow></vxe-column>
                  <vxe-column field="班次" title="班次" show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.班次 ? row.班次 : "班次" }}</a></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
              <a-tab-pane key="关键设备" tab="关键设备">
                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="设备" title="设备" sortable>
                    <template #default="{ row }"><a href="#">{{ row.设备 ? row.设备 : "CNC" }}</a></template>
                  </vxe-column>
                  <vxe-column field="产能" title="产能" sortable show-overflow></vxe-column>
                  <vxe-column field="点检标准" title="点检标准" sortable show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.点检标准 ? row.点检标准 : "点检标准" }}</a></template>
                  </vxe-column>
                  <vxe-column field="负责人" title="负责人" show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.负责人 ? row.负责人 : "张三" }}</a></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
              <a-tab-pane key="关键工装" tab="关键工装">
                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="工装" title="工装" sortable>
                    <template #default="{ row }"><a href="#">{{ row.工装 ? row.工装 : "工装" }}</a></template>
                  </vxe-column>
                  <vxe-column field="点检标准" title="点检标准" sortable show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.点检标准 ? row.点检标准 : "点检标准" }}</a></template>
                  </vxe-column>
                  <vxe-column field="负责人" title="负责人" show-overflow>
                    <template #default="{ row }"><a href="#">{{ row.负责人 ? row.负责人 : "张三" }}</a></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
              <a-tab-pane key="工序BOM" tab="工序BOM">
                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="物料" title="物料" sortable>
                    <template #default="{ row }"><a href="#">{{ row.物料 ? row.物料 : "物料" }}</a></template>
                  </vxe-column>
                  <vxe-column field="数量" title="数量" sortable show-overflow></vxe-column>
                  <vxe-column field="单位" title="单位" show-overflow align="center">
                    <template #default="{ row }"><a-tag color="green">{{ row.单位 ? row.单位 : "EA" }}</a-tag></template>
                  </vxe-column>
                  <vxe-column field="投料方式" title="投料方式" show-overflow>
                    <template #default="{ row }"><a-tag color="green">{{ row.投料方式 ? row.投料方式 : "扫码投料"
                    }}</a-tag></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
              <a-tab-pane key="工位配置" tab="工位配置">

                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="工位" title="工位" sortable>
                    <template #default="{ row }"><a href="#">{{ row.工位 ? row.工位 : "工位" }}</a></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
              <a-tab-pane key="线边超市拉动配置" tab="线边超市拉动配置">

                <vxe-toolbar>
                  <template #buttons>
                    <a-space>
                      <a-button type="primary">添加</a-button>
                      <a-button type="danger">批量删除</a-button>
                    </a-space>
                  </template>
                </vxe-toolbar>
                <vxe-table ref="xTable1" border stripe height="200"
                  :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
                  :row-config="{ isHover: true }" :data="tableData"
                  :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
                  <vxe-column type="checkbox" width="40"></vxe-column>
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="超市" title="超市" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.超市 ? row.超市 : "超市" }}</a></template>
                  </vxe-column>
                  <vxe-column field="类型" title="类型" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.类型 ? row.类型 : "线边超市" }}</a></template>
                  </vxe-column>
                  <vxe-column field="物料" title="物料" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.物料 ? row.物料 : "物料" }}</a></template>
                  </vxe-column>
                  <vxe-column field="容器类型" title="容器类型" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.容器类型 ? row.容器类型 : "周转车" }}</a></template>
                  </vxe-column>
                  <vxe-column field="生产最小批量" title="生产最小批量" sortable width="150"></vxe-column>
                  <vxe-column field="生产看板数量" title="生产看板数量" sortable width="150"></vxe-column>
                  <vxe-column field="生产工作中心" title="生产工作中心" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.生产工作中心 ? row.生产工作中心 : "生产工作中心" }}</a></template>
                  </vxe-column>
                  <vxe-column field="消费最小批量" title="消费最小批量" sortable width="150"></vxe-column>
                  <vxe-column field="消费看板数量" title="消费看板数量" sortable width="150"></vxe-column>
                  <vxe-column field="消费工作中心" title="消费工作中心" sortable width="150">
                    <template #default="{ row }"><a href="#">{{ row.消费工作中心 ? row.消费工作中心 : "消费工作中心" }}</a></template>
                  </vxe-column>
                  <vxe-column field="操作" title="操作" fixed="right" width="150">
                    <template #default>
                      <a-button type="link">编辑</a-button>
                      <a-button type="link" danger>删除</a-button>
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
                  icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
                  icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                  @page-change="handlePageChange">
                </vxe-pager>
              </a-tab-pane>
            </a-tabs>

          </a-tab-pane>
          <a-tab-pane key="产品系列" tab="产品系列">
            <vxe-toolbar>
              <template #buttons>
                <a-space>
                  <a-button type="primary">添加</a-button>
                  <a-button>导入</a-button>
                  <a-button type="danger">批量删除</a-button>
                </a-space>
              </template>
            </vxe-toolbar>
            <vxe-table ref="xTable1" border stripe height="600"
              :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
              :row-config="{ isHover: true }" :data="tableData"
              :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
              <vxe-column type="checkbox" width="40"></vxe-column>
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="编码" title="编码" sortable width="100">
                <template #default="{ rowIndex }">P-0000{{ rowIndex + 1 }}</template>
              </vxe-column>
              <vxe-column field="名称" title="名称" sortable show-overflow width="150"></vxe-column>
              <vxe-column field="操作" title="操作" fixed="right" width="150">
                <template #default>
                  <a-button type="link">编辑</a-button>
                  <a-button type="link" danger>删除</a-button>
                </template>
              </vxe-column>
            </vxe-table>
            <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
              icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
              icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="handlePageChange">
            </vxe-pager>
          </a-tab-pane>
        </a-tabs>

      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "编码": "001",
          "名称": "花键轴系列工艺路线",
          "备注": "",
        },
        {
          "编码": "002",
          "名称": "键轴系列工艺路线",
          "备注": "",
        }
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>